<template>
 <div class="com-container" @dblclick="revertMap">
    <div class="com-charts" ref="map_ref">    
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import { getProvinceMapInfo } from '../utils/map_utils'
 export default {
   data () {
     return {
        echartInstance: null, //echarts实例化对象
        allData: null,          //服务器获取的所有数据
        mapData: {},        //获取省份矢量地图的数据的缓存
     }
   },
   components: {

   },
   mounted(){
       this.initecharts();  //初始化图表
       this.getData();      //获取数据
       //屏幕大小监听事件
       window.addEventListener('resize', this.screenAdapter);
       this.screenAdapter();
   },
   methods: {
       //初始化数据
       async initecharts(){
           this.echartInstance = this.$echarts.init(this.$refs.map_ref,'chalk');
           //获取map的数据
           //http://localhost:9091/static/map/china.json
           const ret = await axios.get("http://localhost:9091/static/map/china.json");
           this.$echarts.registerMap('china',ret.data); //初始化地图数据
           //console.log(ret);
           const creatOption = {
             //标题
              title: {
                text: '▎商家分布',
                // textStyle:{
                //   fontSize: 60,
                // },
                left:30,
                top:20,
              },
             geo:{
               type: 'map',
               map: 'china',
               top: '5%',
               bootom: '5%',
               itemStyle: {
                 areaColor: '#2E728F',
                 borderColor: '#333',
               },
             },
             legend:{
               left: '5%',
               bottom: '5%',
               orient: 'vertical',
             }
           };
           this.echartInstance.setOption(creatOption);

           //地图点击事件
           this.echartInstance.on('click',async arg =>{
             //获取到的是中文
             //console.log(arg);
             const provinceInfo = getProvinceMapInfo(arg.name);
             //console.log(provinceInfo);
             
             //获取地图的矢量数据
             //判断mapData是是否存在省份矢量数据的缓存
             if(!this.mapData[provinceInfo.key]){
               const ret = await axios.get("http://localhost:9091" + provinceInfo.path);
               this.mapData[provinceInfo.key] = ret.data;
               this.$echarts.registerMap(provinceInfo.key,ret.data);
             }
             const changeOption = {
               geo:{
                 map: provinceInfo.key
                 }
             }
             this.echartInstance.setOption(changeOption);
           })
       },
       //获取数据
       async getData(){
           const {data:ret} = await this.$axios.get('map');
           this.allData = ret;
           this.updateChart(); 
       },
       //图例展示(处理数据)
       updateChart(){
         //处理图表需要的数据
         //图例数据
         const legendArr = this.allData.map(item => {
           return item.name;
         })

         const seriesArr = this.allData.map(item =>{
           //return的这个对象就代表的是一个类别下的所有散点数据
           return{
             type: 'effectScatter', //散点图
             //涟漪效果
             rippleEffect:{
               scale: 5,
               brushType: 'stroke',
             },
             name: item.name,
             data: item.children,
             //如果想在地图上显示散点的数据，所有我们需要给散点的图表增加一个配置，coordinateSystem:geo
             coordinateSystem: 'geo',
           }
         })
         const dataOption = {
           legend:{
             data: legendArr
           },
           series: seriesArr,
         };
         this.echartInstance.setOption(dataOption);
       },
       //适配器自适应
       screenAdapter(){
         
         const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6;
         const adapterOption = {
           //标题
          title: {
            textStyle:{
              fontSize: titleFontSize,
            },
          },
          legend:{
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2, //图例标题间隔
            textStyle:{
              fontSize: titleFontSize / 2,
            }
          }
         };
         this.echartInstance.setOption(adapterOption);
         // 手动的调用图表对象的resize 才能产生效果 
         this.echartInstance.resize();
       },
       //双击货到map
       revertMap(){
         const revertOption = {
           geo:{
             map: 'china',
           }
         }
         this.echartInstance.setOption(revertOption);
       }
   }
 }
</script>

<style lang='less' scoped>

 
</style>
